<template>
  <div class="Fg-sub" style="padding:10px 16px">
    <!-- <span>{{$attrs.__config__.componentName}}</span> -->
    <div>
      <div class="Fg-sub-item" v-for="(item,i) in formLists" :key="i" :style="newStyle">
        <div class="Fg-sub-item--top">
          第{{i+1}}项
          <i
            class="el-icon-close"
            @click="handleDelete(i)"
            v-if="!$attrs.onlyShow && formLists.length>1"
          ></i>
        </div>
        <phone-form-row-container
          :list.sync="item.children"
          :formConf="$attrs"
          :font="newStyle.font"
          :onlyShow="$attrs.onlyShow"
        />
      </div>
    </div>
    <van-button
      v-if="!$attrs.onlyShow"
      icon="plus"
      style="margin-top:10px"
      @click="hadnleAdd"
      size="small"
      :disabled="formLists.length==$attrs.maxSize"
    >添加数据</van-button>
  </div>
</template>
 
<script>
import { comMixin } from "../../../utils/comMixins";
export default {
  mixins: [comMixin],
  name: "phone-form-sub",
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
    list: {
      type: Array,
      default: () => [],
    },
    type: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      formLists: this.list.slice(1, this.list.length),
    };
  },
  mounted() {
    if (this.list.length <= 1) {
      this.hadnleAdd();
    }
  },
  methods: {
    indexMethod(index) {
      return index + 1;
    },
    onlyShowFun(item) {
      return this.$attrs.onlyShow || item.onlyShow;
    },
    hadnleAdd() {
      const newItem = this.list[0].children.map((item) => {
        return this.$utils.createFormItem(this.$utils.deepClone(item));
      });
      this.formLists.push({
        value: this.$utils.getUuiKey(),
        children: newItem,
      });
    },
    handleDelete(i) {
      this.formLists.splice(i, 1);
    },
  },
  watch: {
    formLists: {
      immediate: true,
      deep: true,
      handler(newValue) {
        if (newValue && this.list.length) {
          const list = [this.list[0]].concat(newValue);
          this.$emit("update:list", list);
        }
      },
    },
  },
};
</script>

<style lang="scss" >
@import "../../../styles/generator.scss";
@import "@/style/color";

.Fg-sub {
  .Fg-sub-item {
    padding: 5px;
    margin-bottom: 10px;
    border-left: 3px solid #409eff !important;
    border-radius: 5px;
    background: #fafafa;
    font-size: 14px;
    overflow: auto;
    color: $gray-7;
    .van-cell {
      background-color: transparent;
    }
    .Fg-sub-item--top {
      position: relative;
      padding: 10px 40px;
      text-align: right;

      .el-icon-close {
        position: absolute;
        top: 13px;
        right: 10px;
        z-index: 1;
        cursor: pointer;
      }
    }
  }
}
</style>